import React, { useMemo } from 'react';

function TodoStats({ todos }) {
  // 使用 useMemo 优化计算
  const stats = useMemo(() => {
    const total = todos.length;
    const completed = todos.filter(todo => todo.completed).length;
    const active = total - completed;
    const percentComplete = total === 0 ? 0 : Math.round((completed / total) * 100);
    
    return { total, completed, active, percentComplete };
  }, [todos]);

  return (
    <div className="todo-stats">
      <h2>待办事项统计</h2>
      <div className="stats-container">
        <div className="stat-item">
          <div className="stat-value">{stats.total}</div>
          <div className="stat-label">总计</div>
        </div>
        <div className="stat-item">
          <div className="stat-value">{stats.active}</div>
          <div className="stat-label">未完成</div>
        </div>
        <div className="stat-item">
          <div className="stat-value">{stats.completed}</div>
          <div className="stat-label">已完成</div>
        </div>
        <div className="stat-item">
          <div className="stat-value">{stats.percentComplete}%</div>
          <div className="stat-label">完成率</div>
        </div>
      </div>
      
      <div className="progress-bar-container">
        <div 
          className="progress-bar" 
          style={{ width: `${stats.percentComplete}%` }}
        ></div>
      </div>
    </div>
  );
}

export default TodoStats; 